<template>
  <div class="images-container">
    <viewHeader ref="viewHeader" />
    <viewer :images="imagesList" class="images-content">
      <el-carousel trigger="click" height="calc(100vh - 50px)" :autoplay="false" @change="imageChange">
        <el-carousel-item v-for="file in fileImages" :key="file.id" class="flex-main" style="justify-content: center;">
          <div class="img-container">
            <el-image :src="common.getFileView(file.fileUuid)" :preview-src-list="[common.getFileView(file.fileUuid)]" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </viewer>
  </div>
</template>
<script>
import viewHeader from './header.vue'
export default {
  components: { viewHeader },
  data() {
    return {
      fileId: null,
      fileIds: null,
      fileImages: [],
      imagesList: []
    }
  },
  mounted() {
    var { id } = this.$route.params
    this.fileId = id.split(',')[0]
    this.fileIds = id
    this.fetchData()
  },
  methods: {
    fetchData() {
      console.log(this.fileIds)
      this.$store.dispatch('listViewFileResourcesByUUID', { uuids: this.fileIds }).then((res) => {
        if (res.length === 0) {
          this.$modal.msgWarning('文件资源不存在，即将自动关闭窗口')
          setTimeout(() => {
            // this.$refs.viewHeader.close()
          }, 2000)
          return
        }
        this.fileImages = res
        this.imagesList = []
        res.forEach(item => {
          this.imagesList.push(this.common.getFileView(item.fileUuid))
        })
        this.$refs.viewHeader.settingInfo(this.fileImages[0])
      })
    },
    imageChange(e) {
      this.$nextTick(() => {
        this.$refs.viewHeader.settingInfo(this.fileImages[e])
      })
    }

  }
}
</script>
<style lang="scss" scoped>
  .images-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .images-content{
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      .img-container{
        margin: 0 auto;
        max-height: 700px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
